<template>
  <div class="classification">
    <Header>
      <h3>分类</h3>
    </Header>
    <div class="list-main">
      <div class="list-left" ref="left">
        <ul class="left-item">  <!---1级--->
          <li :class="{active: index==currentIndex}"
              v-for="(item,index) in leftData"
              :key="index"
              @click="goScroll(index)"
          >{{ item.name }}</li>
        </ul>
      </div>
      <div class="list-right" ref="right">
        <div ref="rightShopList">
          <ul class="r-ul"
              v-for="(item,index) in rightData"
              :key="index"><!---2级--->
            <li class="shop-list"
                v-for="(it,ind) in item"
                :key="ind">
              <h2>{{it.name}}</h2>
              <ul class="right-content"> <!---3级--->
                <li v-for="(i,idx) in it.list"
                    :key="idx" @click="goDetail(i.id)">
                  <img :src="i.imgUrl">
                  <span>{{ i.name }}</span>
                </li>
              </ul>
            </li>
            <div style="height: 500px;"></div>
          </ul>
        </div>
      </div>
      <div style="height: 550px;"></div>
    </div>
    <div style="height: 200px;"></div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Header from "@/components/search/Header";
import {api1} from "@/common/api/request";
export default {
  name: "classification",
  data(){
    return{
      leftData:[], //左侧一级数据
      rightData:[], //右侧二、三级数据
      rightBScroll:[],
      allHeight:[], //右侧滚动数组的高
      scrollY: 0 //右侧滚动值
    }
  },
  components:{
    Header
  },
  computed:{
    currentIndex:{
      get(){
        return this.allHeight.findIndex((item,index)=>{
          return this.scrollY >= item && this.scrollY < this.allHeight[index+1]
        })
      },
      set(){}
    }
  },
  created() {
    api1({
          url: '/api/goods/list'
        }).then(res => {
          let leftArr = []
          let rightArr = []
          res.forEach(v=>{
            leftArr.push({
              id: v.id,
              name: v.name
            })
            rightArr.push(v.data)
          })
          this.leftData = leftArr
          this.rightData = rightArr


          //等待DOM都加载完执行的代码
          this.$nextTick(()=>{

            //右侧滚动
            this.rightBScroll = new BScroll(this.$refs.right,{
              click:true,
              probeType:3
            })

            let height = 0;
            this.allHeight.push(height);
            //获取到右侧每一个二级的所有高度
            let uls = this.$refs.rightShopList.getElementsByClassName('r-ul');
            Array.from(uls).forEach(v=>{
              height += v.clientHeight
              this.allHeight.push(height-50)
            })
            //右侧滑动==》左侧对应显示
            this.rightBScroll.on('scroll',(pos)=>{
              this.scrollY = Math.abs(pos.y)
            })
          })
    })

  },
  methods:{
    goScroll(index){
      this.currentIndex = index
      this.rightBScroll.scrollTo(0, -this.allHeight[index], 300)
    },
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.active{
  color: red;
  font-size: 20px;
}
.list-main{
  display: flex;
  position: absolute;
  top:50px;
  bottom: 20px;
  overflow: hidden;
}
.list-left{
  width: 150px;
  font-size: 18px;
  background-color: #F4F4F4;
  overflow: hidden;
  .left-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    li{
      width: 100%;
      line-height: 60px;
      text-align: center;
      font-size: 18px;
    }
  }
}
.list-right{
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
    .right-content{
      display: flex;
      flex-wrap: wrap;
      li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 130px;
        height: 150px;
        font-size: 16px;
        img{
          width: 100px;
          height: 100px;
        }
      }
    }

}
</style>